<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>优雅 代码高效的 Vue库 | 冲冲冲</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/wxb-blog/touXiang.jpg">
    <meta name="description" content="前端知识点整理">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/wxb-blog/assets/css/0.styles.c4047da6.css" as="style"><link rel="preload" href="/wxb-blog/assets/js/app.8c0fb757.js" as="script"><link rel="preload" href="/wxb-blog/assets/js/4.900b5326.js" as="script"><link rel="preload" href="/wxb-blog/assets/js/1.627dfec7.js" as="script"><link rel="preload" href="/wxb-blog/assets/js/101.0a4f1ddb.js" as="script"><link rel="prefetch" href="/wxb-blog/assets/js/10.5da366e1.js"><link rel="prefetch" href="/wxb-blog/assets/js/100.6a0e9515.js"><link rel="prefetch" href="/wxb-blog/assets/js/102.f8294266.js"><link rel="prefetch" href="/wxb-blog/assets/js/103.7487022c.js"><link rel="prefetch" href="/wxb-blog/assets/js/104.11246d00.js"><link rel="prefetch" href="/wxb-blog/assets/js/105.f716509d.js"><link rel="prefetch" href="/wxb-blog/assets/js/106.58efb93a.js"><link rel="prefetch" href="/wxb-blog/assets/js/107.62d831d4.js"><link rel="prefetch" href="/wxb-blog/assets/js/108.583b5a2d.js"><link rel="prefetch" href="/wxb-blog/assets/js/109.1209ce30.js"><link rel="prefetch" href="/wxb-blog/assets/js/11.31bc45c0.js"><link rel="prefetch" href="/wxb-blog/assets/js/110.2269d67b.js"><link rel="prefetch" href="/wxb-blog/assets/js/111.c9798d51.js"><link rel="prefetch" href="/wxb-blog/assets/js/112.50a5b1d8.js"><link rel="prefetch" href="/wxb-blog/assets/js/113.a138b788.js"><link rel="prefetch" href="/wxb-blog/assets/js/114.30231cae.js"><link rel="prefetch" href="/wxb-blog/assets/js/115.01c0d6b9.js"><link rel="prefetch" href="/wxb-blog/assets/js/116.3b80b466.js"><link rel="prefetch" href="/wxb-blog/assets/js/117.48830aa8.js"><link rel="prefetch" href="/wxb-blog/assets/js/118.b53a6516.js"><link rel="prefetch" href="/wxb-blog/assets/js/119.271b5e67.js"><link rel="prefetch" href="/wxb-blog/assets/js/12.a84c083f.js"><link rel="prefetch" href="/wxb-blog/assets/js/120.829532de.js"><link rel="prefetch" href="/wxb-blog/assets/js/121.5e6b5cc1.js"><link rel="prefetch" href="/wxb-blog/assets/js/122.ec3253a7.js"><link rel="prefetch" href="/wxb-blog/assets/js/123.d97dcb4a.js"><link rel="prefetch" href="/wxb-blog/assets/js/124.0a2ebde2.js"><link rel="prefetch" href="/wxb-blog/assets/js/125.2325b4c3.js"><link rel="prefetch" href="/wxb-blog/assets/js/13.b0f2669d.js"><link rel="prefetch" href="/wxb-blog/assets/js/14.ec9b0c28.js"><link rel="prefetch" href="/wxb-blog/assets/js/15.73531217.js"><link rel="prefetch" href="/wxb-blog/assets/js/16.caa982f1.js"><link rel="prefetch" href="/wxb-blog/assets/js/17.a3080f70.js"><link rel="prefetch" href="/wxb-blog/assets/js/18.3ed83fbe.js"><link rel="prefetch" href="/wxb-blog/assets/js/19.c6d34143.js"><link rel="prefetch" href="/wxb-blog/assets/js/20.1dbc75a7.js"><link rel="prefetch" href="/wxb-blog/assets/js/21.0b017963.js"><link rel="prefetch" href="/wxb-blog/assets/js/22.1add63ec.js"><link rel="prefetch" href="/wxb-blog/assets/js/23.29eb7ce7.js"><link rel="prefetch" href="/wxb-blog/assets/js/24.1acc14c0.js"><link rel="prefetch" href="/wxb-blog/assets/js/25.4336e0d3.js"><link rel="prefetch" href="/wxb-blog/assets/js/26.0f25ef0b.js"><link rel="prefetch" href="/wxb-blog/assets/js/27.610e84a6.js"><link rel="prefetch" href="/wxb-blog/assets/js/28.46cdd718.js"><link rel="prefetch" href="/wxb-blog/assets/js/29.979ca3bb.js"><link rel="prefetch" href="/wxb-blog/assets/js/30.ea83a5c0.js"><link rel="prefetch" href="/wxb-blog/assets/js/31.e3e3d825.js"><link rel="prefetch" href="/wxb-blog/assets/js/32.aa79659d.js"><link rel="prefetch" href="/wxb-blog/assets/js/33.519bc533.js"><link rel="prefetch" href="/wxb-blog/assets/js/34.532535b1.js"><link rel="prefetch" href="/wxb-blog/assets/js/35.d9c1cc94.js"><link rel="prefetch" href="/wxb-blog/assets/js/36.8d328510.js"><link rel="prefetch" href="/wxb-blog/assets/js/37.c5ee763c.js"><link rel="prefetch" href="/wxb-blog/assets/js/38.33cc76ee.js"><link rel="prefetch" href="/wxb-blog/assets/js/39.7d0f943e.js"><link rel="prefetch" href="/wxb-blog/assets/js/40.67486ae5.js"><link rel="prefetch" href="/wxb-blog/assets/js/41.5c5ebfd0.js"><link rel="prefetch" href="/wxb-blog/assets/js/42.f5596c7b.js"><link rel="prefetch" href="/wxb-blog/assets/js/43.32e8db11.js"><link rel="prefetch" href="/wxb-blog/assets/js/44.3bd8001e.js"><link rel="prefetch" href="/wxb-blog/assets/js/45.65f5b1ae.js"><link rel="prefetch" href="/wxb-blog/assets/js/46.45fc8464.js"><link rel="prefetch" href="/wxb-blog/assets/js/47.459c158e.js"><link rel="prefetch" href="/wxb-blog/assets/js/48.a11bfe4f.js"><link rel="prefetch" href="/wxb-blog/assets/js/49.9c30d506.js"><link rel="prefetch" href="/wxb-blog/assets/js/5.fb67145f.js"><link rel="prefetch" href="/wxb-blog/assets/js/50.4e4774a6.js"><link rel="prefetch" href="/wxb-blog/assets/js/51.9a1b5ee4.js"><link rel="prefetch" href="/wxb-blog/assets/js/52.63ea264a.js"><link rel="prefetch" href="/wxb-blog/assets/js/53.84a598c3.js"><link rel="prefetch" href="/wxb-blog/assets/js/54.a4b338f0.js"><link rel="prefetch" href="/wxb-blog/assets/js/55.e8702b05.js"><link rel="prefetch" href="/wxb-blog/assets/js/56.9f6390ba.js"><link rel="prefetch" href="/wxb-blog/assets/js/57.59f004d1.js"><link rel="prefetch" href="/wxb-blog/assets/js/58.41470fa8.js"><link rel="prefetch" href="/wxb-blog/assets/js/59.b48e3490.js"><link rel="prefetch" href="/wxb-blog/assets/js/6.4c0abb46.js"><link rel="prefetch" href="/wxb-blog/assets/js/60.4c84f1b7.js"><link rel="prefetch" href="/wxb-blog/assets/js/61.ae0fe02f.js"><link rel="prefetch" href="/wxb-blog/assets/js/62.b4e4a1e6.js"><link rel="prefetch" href="/wxb-blog/assets/js/63.ec0dee52.js"><link rel="prefetch" href="/wxb-blog/assets/js/64.3d6d64aa.js"><link rel="prefetch" href="/wxb-blog/assets/js/65.c669dbe2.js"><link rel="prefetch" href="/wxb-blog/assets/js/66.47a199e3.js"><link rel="prefetch" href="/wxb-blog/assets/js/67.b96f5161.js"><link rel="prefetch" href="/wxb-blog/assets/js/68.f2917e43.js"><link rel="prefetch" href="/wxb-blog/assets/js/69.1f0baea0.js"><link rel="prefetch" href="/wxb-blog/assets/js/7.e2ab66a8.js"><link rel="prefetch" href="/wxb-blog/assets/js/70.4f25a08f.js"><link rel="prefetch" href="/wxb-blog/assets/js/71.b319631d.js"><link rel="prefetch" href="/wxb-blog/assets/js/72.e0191932.js"><link rel="prefetch" href="/wxb-blog/assets/js/73.ecb5024d.js"><link rel="prefetch" href="/wxb-blog/assets/js/74.c6e1feec.js"><link rel="prefetch" href="/wxb-blog/assets/js/75.6daefc45.js"><link rel="prefetch" href="/wxb-blog/assets/js/76.ae253459.js"><link rel="prefetch" href="/wxb-blog/assets/js/77.aeeda56a.js"><link rel="prefetch" href="/wxb-blog/assets/js/78.acbdc69b.js"><link rel="prefetch" href="/wxb-blog/assets/js/79.06ee3013.js"><link rel="prefetch" href="/wxb-blog/assets/js/8.457c5be9.js"><link rel="prefetch" href="/wxb-blog/assets/js/80.3e6d4caf.js"><link rel="prefetch" href="/wxb-blog/assets/js/81.e34252a0.js"><link rel="prefetch" href="/wxb-blog/assets/js/82.c2c5018f.js"><link rel="prefetch" href="/wxb-blog/assets/js/83.98e1596b.js"><link rel="prefetch" href="/wxb-blog/assets/js/84.ad81eee2.js"><link rel="prefetch" href="/wxb-blog/assets/js/85.b9f50159.js"><link rel="prefetch" href="/wxb-blog/assets/js/86.02892036.js"><link rel="prefetch" href="/wxb-blog/assets/js/87.46d2a524.js"><link rel="prefetch" href="/wxb-blog/assets/js/88.c4be6ad8.js"><link rel="prefetch" href="/wxb-blog/assets/js/89.6a428824.js"><link rel="prefetch" href="/wxb-blog/assets/js/9.23625e81.js"><link rel="prefetch" href="/wxb-blog/assets/js/90.56b8afcf.js"><link rel="prefetch" href="/wxb-blog/assets/js/91.362cd602.js"><link rel="prefetch" href="/wxb-blog/assets/js/92.73449f51.js"><link rel="prefetch" href="/wxb-blog/assets/js/93.4867589e.js"><link rel="prefetch" href="/wxb-blog/assets/js/94.54b5078f.js"><link rel="prefetch" href="/wxb-blog/assets/js/95.5d023adf.js"><link rel="prefetch" href="/wxb-blog/assets/js/96.35a29d7f.js"><link rel="prefetch" href="/wxb-blog/assets/js/97.3ce9e9b3.js"><link rel="prefetch" href="/wxb-blog/assets/js/98.b9799210.js"><link rel="prefetch" href="/wxb-blog/assets/js/99.4ed8d1d2.js"><link rel="prefetch" href="/wxb-blog/assets/js/vendors~flowchart.dea86b1a.js">
    <link rel="stylesheet" href="/wxb-blog/assets/css/0.styles.c4047da6.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-7dd95ae2><div data-v-7dd95ae2><div class="password-shadow password-wrapper-out" style="display:none;" data-v-59e6cb88 data-v-7dd95ae2 data-v-7dd95ae2><h3 class="title" data-v-59e6cb88>冲冲冲</h3> <p class="description" data-v-59e6cb88>前端知识点整理</p> <label id="box" class="inputBox" data-v-59e6cb88><input type="password" value="" data-v-59e6cb88> <span data-v-59e6cb88>Konck! Knock!</span> <button data-v-59e6cb88>OK</button></label> <div class="footer" data-v-59e6cb88><span data-v-59e6cb88><i class="iconfont reco-theme" data-v-59e6cb88></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-59e6cb88>vuePress-theme-reco</a></span> <span data-v-59e6cb88><i class="iconfont reco-copyright" data-v-59e6cb88></i> <a data-v-59e6cb88><span data-v-59e6cb88>wxb</span>
          
        <span data-v-59e6cb88>2022 - </span>
        2023
      </a></span></div></div> <div class="hide" data-v-7dd95ae2><header class="navbar" data-v-7dd95ae2><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/wxb-blog/" class="home-link router-link-active"><img src="/wxb-blog/touXiang.jpg" alt="冲冲冲" class="logo"> <span class="site-name">冲冲冲</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/wxb-blog/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/Css/" class="nav-link"><i class="undefined"></i>
  Css
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/Docker/" class="nav-link"><i class="undefined"></i>
  Docker
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/HTML/" class="nav-link"><i class="undefined"></i>
  HTML
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/Javascript/" class="nav-link"><i class="undefined"></i>
  Javascript
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/React/" class="nav-link"><i class="undefined"></i>
  React
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/uniapp项目/" class="nav-link"><i class="undefined"></i>
  uniapp项目
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/Vue/" class="nav-link"><i class="undefined"></i>
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/项目/" class="nav-link"><i class="undefined"></i>
  项目
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/Vue3/" class="nav-link"><i class="undefined"></i>
  Vue3
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/插件库/" class="nav-link"><i class="undefined"></i>
  插件库
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/工具/" class="nav-link"><i class="undefined"></i>
  工具
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/开源项目/" class="nav-link"><i class="undefined"></i>
  开源项目
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/面试题/" class="nav-link"><i class="undefined"></i>
  面试题
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/面试问/" class="nav-link"><i class="undefined"></i>
  面试问
</a></li></ul></div></div><div class="nav-item"><a href="/wxb-blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      王xb
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/wxb666" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="undefined"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-7dd95ae2></div> <aside class="sidebar" data-v-7dd95ae2><div class="personal-info-wrapper" data-v-1fad0c41 data-v-7dd95ae2><img src="/wxb-blog/touXiang.jpg" alt="author-avatar" class="personal-img" data-v-1fad0c41> <h3 class="name" data-v-1fad0c41>
    wxb
  </h3> <div class="num" data-v-1fad0c41><div data-v-1fad0c41><h3 data-v-1fad0c41>112</h3> <h6 data-v-1fad0c41>Articles</h6></div> <div data-v-1fad0c41><h3 data-v-1fad0c41>22</h3> <h6 data-v-1fad0c41>Tags</h6></div></div> <ul class="social-links" data-v-1fad0c41></ul> <hr data-v-1fad0c41></div> <nav class="nav-links"><div class="nav-item"><a href="/wxb-blog/" class="nav-link"><i class="iconfont reco-home"></i>
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/Css/" class="nav-link"><i class="undefined"></i>
  Css
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/Docker/" class="nav-link"><i class="undefined"></i>
  Docker
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/HTML/" class="nav-link"><i class="undefined"></i>
  HTML
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/Javascript/" class="nav-link"><i class="undefined"></i>
  Javascript
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/React/" class="nav-link"><i class="undefined"></i>
  React
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/uniapp项目/" class="nav-link"><i class="undefined"></i>
  uniapp项目
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/Vue/" class="nav-link"><i class="undefined"></i>
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/项目/" class="nav-link"><i class="undefined"></i>
  项目
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/Vue3/" class="nav-link"><i class="undefined"></i>
  Vue3
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/插件库/" class="nav-link"><i class="undefined"></i>
  插件库
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/工具/" class="nav-link"><i class="undefined"></i>
  工具
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/开源项目/" class="nav-link"><i class="undefined"></i>
  开源项目
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/面试题/" class="nav-link"><i class="undefined"></i>
  面试题
</a></li><li class="dropdown-item"><!----> <a href="/wxb-blog/categories/面试问/" class="nav-link"><i class="undefined"></i>
  面试问
</a></li></ul></div></div><div class="nav-item"><a href="/wxb-blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      王xb
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/wxb666" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="undefined"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-59e6cb88 data-v-7dd95ae2><h3 class="title" data-v-59e6cb88>优雅 代码高效的 Vue库</h3> <!----> <label id="box" class="inputBox" data-v-59e6cb88><input type="password" value="" data-v-59e6cb88> <span data-v-59e6cb88>Konck! Knock!</span> <button data-v-59e6cb88>OK</button></label> <div class="footer" data-v-59e6cb88><span data-v-59e6cb88><i class="iconfont reco-theme" data-v-59e6cb88></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-59e6cb88>vuePress-theme-reco</a></span> <span data-v-59e6cb88><i class="iconfont reco-copyright" data-v-59e6cb88></i> <a data-v-59e6cb88><span data-v-59e6cb88>wxb</span>
          
        <span data-v-59e6cb88>2022 - </span>
        2023
      </a></span></div></div> <div data-v-7dd95ae2><div data-v-7dd95ae2><main class="page" style="padding-right:0;"><section style="display:;"><div class="page-title"><h1 class="title">优雅 代码高效的 Vue库</h1> <div data-v-8a445198><i class="iconfont reco-account" data-v-8a445198><span data-v-8a445198>王xb</span></i> <i class="iconfont reco-date" data-v-8a445198><span data-v-8a445198>9/8/2022</span></i> <!----> <i class="tags iconfont reco-tag" data-v-8a445198><span class="tag-item" data-v-8a445198>Vue库</span></i></div></div> <div class="theme-reco-content content__default"><p>今天来推荐几个热门又实用的 Vue.js 库！</p> <ol><li>状态管理
（1）Pinia
Pinia 是最新一代的 Vue 轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 Vue 官方成员在2019年11月重新设计的一个状态存储库，它允许你跨组件/页面共享状态，并且是响应式的，类似于 Vuex。</li></ol> <p>Github：https://github.com/vuejs/pinia</p> <p>（2）Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p> <p>Github：https://github.com/vuejs/vuex</p> <p>（3）vuex-persist
vuex-persistedstate 是一个支持 Typescript 的Vuex插件，使你能够将应用程序的状态保存到持久存储中，例如 Cookies 或 localStorage。</p> <p>Github：https://github.com/championswimmer/vuex-persist</p> <ol start="2"><li>表单
（1）VeeValidate
vee-validate 是Vue.js的表单验证库，它允许验证输入并以熟悉的声明式样式或使用组合函数构建更好的表单 UI。</li></ol> <p>Github：https://github.com/logaretm/vee-validate</p> <p>（2）vue-form-making
vue-form-making 是一个基于 vue 和 element-ui 实现的可视化表单设计器，使用了最新的前端技术栈，内置了 i18n 国际化解决方案，可以让表单开发简单而高效。</p> <p>Github：https://github.com/GavinZhuLei/vue-form-making</p> <p>（3）FormKit
FormKit 是一个面向 Vue 开发人员的表单创作框架，它使构建高质量的生产就绪表单的速度提高了 10 倍。</p> <p>Github：https://github.com/formkit/formkit</p> <ol start="3"><li>文档
（1）VitePress
VitePress 是 VuePress 的继承者，建立在vite 之上。目前，正处于alpha阶段。它已经适合开箱即用的文档使用，但配置和主题 API 可能仍会在次要版本之间发生变化。</li></ol> <p>Github：https://github.com/vuejs/vitepress</p> <p>（2）VuePress
VuePress 是一个基于 Vue 的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。它是为了满足 Vue 自己的子项目文档的需求而创建的。</p> <p>Github：https://github.com/vuepress/vuepress-next</p> <p>（3）Gridsome
Gridsome 是一个基于 Vue.js 构建的 Jamstack 框架，它让开发人员可以轻松地构建静态生成的网站和应用程序，这些网站和应用程序天生速度快。</p> <p>Github：https://github.com/gridsome/gridsome</p> <ol start="4"><li>测试
（1）Vitest
Vitest 是一个由 Vite 提供支持的极速单元测试框架。其和 Vite 的配置、转换器、解析器和插件保持一致，具有开箱即用的 TypeScript / JSX 支持。</li></ol> <p>Github：https://github.com/vitest-dev/vitest</p> <p>（2）Jest
Jest 是一个全面的 JavaScript 测试解决方案，专注于简洁明快。适用于大多数 JavaScript 项目。</p> <p>Github：https://github.com/facebook/jest</p> <p>（3）Mocha
mocha是一个功能丰富的javascript测试框架，运行在node.js和浏览器中，使异步测试变得简单有趣。Mocha测试连续运行，允许灵活和准确的报告，同时将未捕获的异常映射到正确的测试用例。</p> <p>Github：https://github.com/mochajs/mocha</p> <ol start="5"><li>可视化
（1）Vue ChartJS
vue-chartjs 是一个 Vue 对于 Chart.js 的封装，让用户可以在Vue中轻松使用Chart.js，很简单的创建可复用的图表组件，非常适合需要简单的图表并尽可能快地运行的人。vue-chartjs抽象了基本逻辑，同时也暴露了Chart.js对象，让用户获得最大的灵活性。它支持 Vue 3 和 Vue 2。</li></ol> <p>Github：https://github.com/apertureless/vue-chartjs</p> <p>（2）Apache ECharts
Apache ECharts 是一款基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。它是用纯 JavaScript 编写的，基于zrender，是一个全新的轻量级画布库。!</p> <p>GitHub：https://github.com/apache/echarts</p> <p>（3）Vue-ECharts
Vue-ECharts 是 Apache ECharts 的 Vue.js 组件。使用 Apache ECharts 5，同时支持 Vue.js 2/3。</p> <p>Github：https://github.com/ecomfe/vue-echarts</p> <p>（4）Trois
Trois 是一个基于 Three.JS 的 Vue 3 可视化库，它是一个流行的 WebGL 库。Three.JS 对桌面和移动设备都有很好的支持。该库允许我们使用 VueJS 组件轻松为网站创建 3D 效果。</p> <p>Github：https://github.com/troisjs/trois</p> <ol start="6"><li>组件
（1）Vue Grid Layout
vue-grid-layout 是一个网格布局系统，类似于 Gridster，用于 Vue.js。</li></ol> <p>Github：https://github.com/jbaysolutions/vue-grid-layout</p> <p>（2）Vue Draggable
Vue Draggable 是一个基于 Sortable.js 的 Vue 拖拽组件。</p> <p>Github：https://github.com/SortableJS/Vue.Draggable</p> <p>（3）Vue Tour
Vue Tour 是一个轻量级、简单且可定制的导览插件，可与 Vue.js 一起使用。它提供了一种快速简便的方法来指导用户完成你的应用程序。</p> <p>Github：https://github.com/pulsardev/vue-tour</p> <p>（4）Swiper.js
Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡。主要使用与移动端的网站、网页应用程序，以及原生的应用程序。</p> <p>Github：https://github.com/nolimits4web/swiper</p> <p>（5）vue-easytable
该库提供了一个功能齐全且高度可定制的表格组件/数据网格。它支持许多功能，如虚拟滚动、列固定、标题固定、标题分组、过滤器、排序、单元格省略号、行扩展、行复选框等。</p> <p>Github：https://github.com/Happy-Coding-Clans/vue-easytable</p> <ol start="7"><li>UI 组件
（1）Element Plus
Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus 是基于 Vue3 面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型。</li></ol> <p>GitHub：https://github.com/ElemeFE/element</p> <p>（2）Vuetify
Vuetify 是一个基于 Vue.js 精心打造 UI 组件库，整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。</p> <p>GitHub：https://github.com/vuetifyjs/vuetify</p> <p>（3）Vant
Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率，支持 Vue 3。</p> <p>Github：https://github.com/youzan/vant</p> <p>（4）Naive UI
Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript 技栈开发的前端 UI 组件库。</p> <p>Github：https://github.com/TuSimple/naive-ui</p> <ol start="8"><li>动画
（1）Animate.css
animate.css 是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。</li></ol> <p>GitHub：https://github.com/animate-css/animate.css</p> <p>（2）Greensock
GreenSock是一个JavaScript动画库，可轻松对HTML元素进行动画处理。用于创建高性能，零依赖性，跨浏览器动画，声称在超过 400 万个网站中使用。</p> <p>Github：https://github.com/greensock/GreenSock-JS/</p> <p>（3）Popmotion
Popmotion 是一个只有12KB的 JavaScript 运动引擎，可以用来实现动画，物理效果和输入跟踪。原生的DOM支持：CSS，SVG，SVG路径和DOM属性的支持，开箱即用。</p> <p>Github：https://github.com/Popmotion/popmotion</p> <p>（4）Vue Kinesis
Vue Kinesis 支持使用 Vue.js 轻松创建复杂的交互式动画，其支持 Vue 3。</p> <p>Github：https://github.com/Aminerman/vue-kinesis</p> <ol start="9"><li>图标
（1）IconPark
IconPark 提供超过 2400 个高质量图标，还提供了每个图标的含义和来源的描述，便于开发者使用。除此之外，该网站还可以自定义图标，这是与其他图标网站与众不同的地方。该图标库是字节跳动旗下的技术驱动图标样式的开源图标库。</li></ol> <p>Github：https://github.com/bytedance/iconpark</p> <p>（2）Font Awesome
Font Awesome 提供了可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。</p> <p>Github：https://github.com/FortAwesome/Font-Awesome</p> <p>（3）Ionicons
Ionicons 是一个完全开源的图标集，是知名混合开发框架 Ionic Framework 内置的图标库，包含 1300 个设计优雅、风格统一的高质量图标，能满足大多数的业务场景。</p> <p>Github：https://github.com/ionic-team/ionicons</p> <p>（4）Bootstrap Icons
Bootstrap Icons 是 Bootstrap 开源的 SVG 图标库，此图标库起初专门针对其组件（从表单控件到导航）和文档进行定制设计和构建，现在可以免费用于任何项目。</p> <p>Github：https://github.com/twbs/icons</p> <ol start="10"><li>富文本编辑器
（1）Tiptap
Tiptap 是一个基于 Vue 的无渲染的富文本编辑器，它基于 Prosemirror，完全可扩展且无渲染。可以轻松地将自定义节点添加为Vue组件。使用无渲染组件（函数式组件），几乎完全控制标记和样式。菜单的外观或在DOM中的显示位置。这完全取决于使用者。</li></ol> <p>GitHub：https://github.com/ueberdosis/tiptap</p> <p>（2）Quill.js
Quill.js 是一个具有跨平台和跨浏览器支持的富文本编辑器。凭借其可扩展架构和富有表现力的 API，可以完全自定义它以满足个性化的需求。</p> <p>GitHub：https://github.com/quilljs/quill/</p> <p>（3）TinyMCE
TinyMCE 是一个热门的富文本编辑器。它的目标是帮助其他开发人员构建精美的 Web 内容解决方案。它易于集成，可以部署在基于云的、自托管或混合环境中。该设置使得合并诸如 Angular、React 和 Vue 等框架成为可能。它还可以使用 50 多个插件进行扩展，每个插件都有 100 多个自定义选项。</p> <p>GitHub：https://github.com/tinymce/tinymce</p> <p>（4）CKEditor 5
CKEditor 是一个强大的富文本编辑器框架，具有模块化架构、现代集成和协作编辑等功能。它可以通过基于插件的架构进行扩展，从而可以将必要的内容处理功能引入。它是在 ES6 中从头开始编写的，并且具有出色的 webpack支持。可以使用与Angular、React和Vue.js的原生集成。</p> <p>GitHub：https://github.com/ckeditor/ckeditor5</p> <ol start="11"><li>服务端渲染
（1）Nuxt.js
Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。它预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。</li></ol> <p>Github：https://github.com/nuxt/nuxt.js</p> <p>（2）SSR
ssr 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。面向 Serverless，同时支持 React，Vue2，Vue3。</p> <p>Github：https://github.com/zhangyuang/ssr</p> <p>（3）Vue-meta
Vue-meta 是 Vue.js 的一个插件，它可以帮助你使用 SSR 支持管理 Vue.js 组件中的 HTML 元数据。Vue-meta 使用 Vue 的内置响应性使管理应用程序的元数据变得简单。</p> <p>Github：https://vue-meta.nuxtjs.org/</p> <ol start="12"><li>数据获取
（1）Axios
Axios 是一个基于promise 的网络请求库，作用于node.js和浏览器中。</li></ol> <p>Github：https://github.com/axios/axios</p> <p>（2）vue-resource
vue-resource是 Vue.js 的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。</p> <p>Github：https://github.com/pagekit/vue-resource</p> <p>（3）vue-axios
vue-axios 是一个将 axios 集成到 Vuejs 的小型库。</p> <p>Github：https://github.com/imcvampire/vue-axios</p> <ol start="13"><li>构建工具
（1）Vite
Vite 是下一代前端开发与构建工具。Vite 意在提供开箱即用的配置，同时它的插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。</li></ol> <p>Github：https://github.com/vitejs/vite</p> <p>（2）Webpack
webpack 是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。</p> <p>Github：https://github.com/webpack/webp</p></div></section> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">3/6/2023, 7:59:39 PM</span></div></footer> <!----> <div class="comments-wrapper"><!----></div></main></div> <!----></div> <ul class="sub-sidebar sub-sidebar-wrapper" style="width:0;" data-v-b57cc07c data-v-7dd95ae2></ul></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div></div></div>
    <script src="/wxb-blog/assets/js/app.8c0fb757.js" defer></script><script src="/wxb-blog/assets/js/4.900b5326.js" defer></script><script src="/wxb-blog/assets/js/1.627dfec7.js" defer></script><script src="/wxb-blog/assets/js/101.0a4f1ddb.js" defer></script>
  </body>
</html>
